Learning Web Design by Jennifer Robbins

Author:Jennifer Robbins
Language: eng
Format: epub
Publisher: O'Reilly Media
Published: 2018-05-31T23:53:37+00:00

Figure 14-9. Border styles applied to individual sides of an element.

Border Width (Thickness)

Use one of the border-width properties to specify the thickness of the border. Once again, you can target each side of the element with a single-side property, or specify several sides at once in clockwise order with the shorthand border-width property.

border-top-width, border-right-width,

border-bottom-width, border-left-width

Values: length | thin | medium | thick

Default: medium

Applies to: all elements

Inherits: no

border-width

Values: length | thin | medium | thick

Default: medium

Applies to: all elements

Inherits: no

The most common way to specify the width of borders is using a pixel or em measurement; however, you can also specify one of the keywords (thin, medium, or thick) and leave the rendering up to the browser.

I’ve included a mix of values in this example (Figure 14-10). Notice that I’ve also included the border-style property because if I didn’t, the border would not render at all:

div#help {

border-top-width: thin;

border-right-width: medium;

border-bottom-width: thick;

border-left-width: 12px;

border-style: solid;

width: 300px;

height: 100px;

}

or:

div#help {

border-width: thin medium thick 12px;

border-style: solid;

width: 300px;

height: 100px;

}

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.